#@adminLayout() #define main()

<link href="#(ctx)/static/ajax/libs/jquery-ztree/3.5/css/metro/zTreeStyle.css" rel="stylesheet"/>
<script src="#(ctx)/static/ajax/libs/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js"></script>

<body class="gray-bg">
	<div class="ui-layout-west">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i>菜单目录
				</div>
				<div class="box-tools pull-right">
				    <a id="newFile" type="button" class="btn btn-box-tool" href="#" onclick="add()" title="新增顶级菜单"><i class="fa fa-plus"></i></a>
					<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新栏目"><i class="fa fa-refresh"></i></button>
				</div>
			</div>
			<div class="ui-layout-content">
				<ul id="tree" class="ztree"></ul>
			</div>
		</div>
	</div>
	
	<div class="ui-layout-center">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12 search-collapse" id="searchbar">
					<form id="user-form">
						<div class="select-list">
							<ul>
		                        
		                        <li>
		                     		 菜单名称：<input type="text" name="cname" style="width:120px;"/>
									<input type="hidden" name="cclass2" id="hf_class2"/>
		                        </li>
		                        
		                        <li>
		                            <a class="btn btn-primary btn-rounded btn-sm" onclick="doSearch()"><i class="fa fa-search"></i>&nbsp;搜索</a>
		                            <a class="btn btn-warning btn-rounded btn-sm" onclick="doReset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
		                        </li>
							</ul>
						</div>
					</form>
				</div>
				
		        <div class="btn-group-sm" id="toolbar" role="group">
		            <a class="btn btn-success" onclick="addMenu()" id="btn_add">
		                <i class="fa fa-plus"></i> 新增
		            </a>
		            <a class="btn btn-primary single disabled" onclick="$.operate.edit()"  id="btn_edit">
		                <i class="fa fa-edit"></i> 修改
		            </a>
		            <!-- <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()">
		                <i class="fa fa-remove"></i> 删除
		            </a>
		            <a class="btn btn-info" onclick="$.table.importExcel()">
					     <i class="fa fa-upload"></i> 导入
			        </a> -->
		            <a class="btn btn-warning" onclick="$.table.exportExcel()">
		                <i class="fa fa-download"></i> 导出
		            </a>
		        </div>
		        
		        <div class="col-sm-12 select-table table-bordered">
				    <table id="bootstrap-table" data-mobile-responsive="true"></table>
				</div>
			</div>
		</div>
	</div>
	
	

<div class="modal fade" id="add_modal">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title">菜单</h4>
	      </div>
	      <div class="modal-body">
	        	<form id="form-config-add" method="post"  class="form-horizontal m" >
					<!-- <input id="id" name="ccode" type="hidden"> -->
					<!-- <input id="pid" name="pclass" type="hidden"> -->
					<div class="form-group">
						<label class="col-sm-2 control-label">父编码：</label>
						<div class="col-sm-8">
							<input id="pid" name="pclass" class="form-control" type="text"
								required readonly>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">编码：</label>
						<div class="col-sm-8">
							<input id="id" name="ccode" class="form-control" type="text"
								required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">名称：</label>
						<div class="col-sm-8">
							<input name="cname" class="form-control" type="text"
								required>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">序号：</label>
						<div class="col-sm-8">
							<input type="number" name="isort" value="1" class="form-control" required/>
						</div>
					</div>
				</form>
	      </div>
	      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">关闭窗口</button>
		        <button type="button" class="btn btn-primary" onclick="saveContent()">保存</button>
		      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
</div>
	
	
	<script type="text/javascript">
		var prefix = "#(ctx)/sysmenu";
		
		$(function() {
			var panehHidden = false;
		    var west__size=200;
		    if ($(this).width() < 769) {
				panehHidden = true;
		    }
		    $('body').layout({ initClosed: panehHidden, west__size: west__size,west__resizable:true });

		    queryTree();
		    queryList();
			
		    $('#btn_add').addClass("disabled");
		});
		
		function queryList() {
		    var options = {
		        url: prefix + "/list",
	            createUrl: prefix + "/edit",
	            updateUrl: prefix + "/edit?ccode={id}",
	            removeUrl: prefix + "/remove",
	            exportUrl: prefix + "/export",
		        importUrl: prefix + "/importData",
		        importTemplateUrl: prefix + "/importTemplate",
	            uniqueId: "ccode",
	            sortName: "cname",
	            sortOrder: "asc",
	            modalName: "菜单",
	            rowStyle: function(row, index) {
	            	if (row.st_flag=='0') {
	                    return {
	                    	css: {
		                        background: '#DCDCDC'
		                    }
	                    }
	                }
	                return {
	                    css: {
	                        color: ''
	                    }
	                } 
	            },
	            columns: [{
	                checkbox: true
	            },{
						title: '序号',//标题  可不加,
	                    width:'50px',
						formatter: function (value, row, index) {
							return index+1;
						}
	             },
                {
                    title: '操作',
                    align: 'center',
                    width: '120px',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.ccode + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.ccode + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                },            {
	                field: 'cname',
	                title: '菜单名',
	                width: '150px'
	            },
	             	            {
	                field: 'cdesc',
	                title: '菜单描述',
	                width: '150px'
	            },
	             	            {
	                field: 'cprg',
	                title: '菜单路径',
	                width: '150px'
	            },
	             	 {
	                field: 'cclass2',
	                title: '菜单目录',
	                width: '150px'
	            },
	             	            {
	                field: 'cprg_cs',
	                title: 'CS菜单路径',
	                width: '150px'
	            },
	             	            {
	                field: 'st_flag',
	                title: '是否启用',
	                width: '60px'
	            },
	             	            {
	                field: 'isort',
	                title: '排序号',
	                width: '60px'
	            },]
		    };
		    $.table.init(options);
			
		    $("#bootstrap-table").colResizable({
				liveDrag:true, 
				gripInnerHtml:"<div class='grip'></div>", 
				draggingClass:"dragging", 
	            resizeMode:'overflow'
	        });
		}

		function doSearch()
		{
			queryTree();
			$.table.search();
		}
		function doReset()
		{
			queryTree();
			$.form.reset();
		}
		
		function addMenu()
		{
			var cclass2=$('#hf_class2').val();
			var url = prefix + "/edit?cclass2="+cclass2;
			$.modal.open("新增菜单", url);
		}
		
		function queryTree()
		{
			var url = prefix+"/menuTree";
			var options = {
		        url: url,
		        expandLevel: 0,
		        onClick : zOnClick,
		        view: {
		    		//addDiyDom: addDiyDom,
					addHoverDom: addHoverDom,
					removeHoverDom: removeHoverDom,
					selectedMulti: false
		    	},
				edit: {
					enable: true,
					editNameSelectAll: true,
					//showRemoveBtn: showRemoveBtn,
					//showRenameBtn: showRenameBtn
				},
				data: {
		    		simpleData: {
		    			enable: true,
		    			idKey: "id",
		    			pIdKey: "pid"
		    		}
				}
		    };
			$.tree.init(options);
			
			function zOnClick(event, treeId, treeNode) {
				//点击树形结构最底栏目才能新增
				/*var zTree = $.fn.zTree.getZTreeObj(treeId);
				var nodes = zTree.getSelectedNodes();*/
				$('#hf_class2').val(treeNode.id);
			    $('#btn_add').removeClass("disabled");
				$.table.search();
			}
		}
		
		$('#btnExpand').click(function() {
			$._tree.expandAll(true);
		    $(this).hide();
		    $('#btnCollapse').show();
		});
		
		$('#btnCollapse').click(function() {
			$._tree.expandAll(false);
		    $(this).hide();
		    $('#btnExpand').show();
		});
		
		$('#btnRefresh').click(function() {
			queryTree();
		});
		
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
			$("#editBtn_"+treeNode.tId).unbind().remove();
			$("#delBtn_"+treeNode.tId).unbind().remove();
		};
		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0
					|| $("#editBtn_"+treeNode.tId).length>0|| $("#delBtn_"+treeNode.tId).length>0) return;
			
			var addStr="";
			if(treeNode.getParentNode()==null)
			{
				addStr = "<span class='button add' id='addBtn_" + treeNode.tId
					+ "' title='add node' onfocus='this.blur();' onclick='addTree(\""+treeNode.id+"\")'></span>"
				+ "<span class='button edit' id='editBtn_" + treeNode.tId
					+ "' title='edit node' onfocus='this.blur();' onclick='editTree(\""+treeNode.id+"\")'></span>"
				+ "<span class='button remove' id='delBtn_" + treeNode.tId
					+ "' title='remove node' onfocus='this.blur();' onclick='delTree(\""+treeNode.id+"\")'></span>";
			}
			else
			{
				addStr = "<span class='button edit' id='editBtn_" + treeNode.tId
					+ "' title='edit node' onfocus='this.blur();' onclick='editTree(\""+treeNode.id+"\")'></span>"
				+ "<span class='button remove' id='delBtn_" + treeNode.tId
					+ "' title='remove node' onfocus='this.blur();' onclick='delTree(\""+treeNode.id+"\")'></span>";
			}
			
			sObj.after(addStr);
		};
		

		//添加子节点
		function addTree(pid)
		{
	    	$('#form-config-add')[0].reset();
	    	$("#add_modal").modal({backdrop:true,keyboard:true});
			$('#id').val(pid);
			$('#pid').val(pid);
		}
		//编辑节点
		function editTree(id)
		{
	    	$('#form-config-add')[0].reset();
	    	$("#add_modal").modal({backdrop:true,keyboard:true});
			$('#id').val(id);
			$('#form-config-add').loadForm(prefix+'/getDataTree?ccode='+id);
		}
		
		//添加根节点
		function add() {
	    	$('#form-config-add')[0].reset();
	    	$("#add_modal").modal({backdrop:true,keyboard:true});
			$('#pid').val("0");
		}
		//保存
	    function saveContent() {
	    	var data=$('#form-config-add').serialize();
	    	var config = {
		   	        url: prefix+"/saveTree",
		   	     	type: "post",
			        dataType: "json",
		   	        data: data,
		   	        beforeSend: function () {
			        	$.modal.loading("正在处理中，请稍后...");
			        	$.modal.disable();
		   	        },
		   	        success: function(result) {
		   	        	if(result.code==0)
		       			{
		   	        		queryTree();
		                }
		   	        	else 
		   	        	{
		                  $.modal.alertError(result.msg);
		                }
		   	        	$.modal.closeLoading();
		   	        	$("#add_modal").modal('hide');
		   	        }
		   	    };
		   	    $.ajax(config);
	    }
		//删除
	    function delTree(id) {
	    	$.modal.confirm("确定删除该条信息吗？", function() {
	    		var config = {
		   	        url: prefix+"/deleteTree",
		   	     	type: "post",
			        dataType: "json",
		   	        data:{ccode:id},
		   	        beforeSend: function () {
			        	$.modal.loading("正在处理中，请稍后...");
			        	$.modal.disable();
		   	        },
		   	        success: function(result) {
		   	        	if(result.code==0)
		       			{
		   	        		queryTree();
		                }
		   	        	else {
		                  $.modal.alertError(result.msg);
		                }
		   	        	$.modal.closeLoading();
		   	        	$("#add_modal").modal('hide');
		   	        }
		   	    };
		   	    $.ajax(config);
	    	});
		}
	</script>
</body>
#end